<template>
  <h3>setup 语法糖</h3>
  <div class="note">
    <p>1. 无需return导入变量或方法，可直接拿来使用</p>
    <p>2. setup中没有this</p>
    <p>3. 如下的changeStr方法，str的值也会改变。 因为str2是响应式的，和str在同一个方法里。会触发UI的更新</p>
  </div>
  <div class="group">
    <p>{{ str }}</p>
    <p>{{ str2 }}</p>
  </div>
  <button type="button" @click="changeStr">点我修改字符串内容</button>
  <!-- <StuDemo5></StuDemo5> -->
</template>

<!-- 另建一个script写名字 -->
<script>
export default {
  name: 'Study1StuDemo5'
}
</script>

<!-- 
 setup语法糖中：
 1. 无需return导入变量或方法，可直接拿来使用
 2. 如下的changeStr方法，str的值也会改变。
    因为str2是响应式的，和str在同一个方法里。会触发UI的更新 -->

<script setup>
// import StuDemo5 from '@/views/study3/StuDemo5.vue';
import { ref } from 'vue'
console.log(this) // undefined  setup中没有this

// 普通变量
let str = '我是组合式api的普通变量'

// 响应式变量
const str2 = ref('我是组合式api的响应式变量')

const changeStr = () => {
  console.log('changeStr')
  str = '我不能响应式显示UI的效果，修改我没用'
  console.log(str)
  str2.value = '我是响应变量，我可以出发UI的更新' //ref的值需要用.value
  fun1()
}

const fun1 = () => {
  console.log('fun1')
}
</script>

<style scoped>
body {
  padding: 20px;
}
h2 {
  color: red;
}
h3 {
  color: rgb(220, 85, 85);
}
h4 {
  color: skyblue;
}
.hr-style {
  border: 3px solid gold;
  margin: 20px 0;
}
.group {
  border: 4px solid rgb(102, 215, 85);
  margin: 10px;
  padding: 10px;
}
.group3 {
  border: 2px solid rgb(64, 163, 199);
  margin: 10px;
  padding: 10px;
}
.note {
  margin: 10px;
  padding: 10px;
  border: 3px solid rgb(221, 121, 202);
}
.note p {
  color: rgb(226, 106, 204);
  font-weight: bold;
}
</style>
